<script setup>
import {ref, inject} from 'vue'
import {ElTable, ElTableColumn, ElTag, ElMessageBox, ElMessage} from 'element-plus'
import axios from 'axios'
import router from '@/router'
import TalentContent from '@/components/Manage/notifications/TalentContent.vue'

const userinfo=inject('userinfo')
if(!userinfo.value){
    //若没有登录，无法访问
    router.push('/')
}
const mitt=inject('mitt')

const notification_all=ref([])
mitt.on('notification_all',async()=>{
    try{
        var ret=await axios.get(`/api/notification/${userinfo.value.id}/all`)
        notification_all.value=ret.data
    }catch(err){
        console.error('mitt: notification_all ',err)
    }
})
mitt.emit('notification_all')

function tableRowClassName({row, rowIndex}){
    if(row.to_status=='REJECTED') return 'warning-row'
}

const talent_model=ref(false)
const notification=ref()
function handleRowClick(row){
    notification.value=row
    switch(row.type){
        case 'TALENT':
            talent_model.value=true
            break
        default:
            console.error('消息内容类别错误！')
    }
}

function handleRemove(e, row, index){
    e.stopImmediatePropagation()
    ElMessageBox.confirm(
        '确定移除该条通知？',
        {
            confirmButtonText:'移除',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(async ()=>{
        try{
            var ret=await axios.delete(`/api/notification/${row.id}`)
            for(var i=0;i<notification_all.value.length;i++){
                if(notification_all.value[i].id==row.id){
                    notification_all.value.splice(i,1)
                    break
                }
            }
            ElMessage('成功移除')
        }catch(err){
            console.error(err)
            ElMessage('发生错误：',err.code)
        }
    }).catch(()=>{})
}

</script>

<template>
<div>
    <TalentContent v-if=talent_model v-model="talent_model" v-model:notification="notification"/>
    <div class="table">
        <el-table :data="notification_all" :stripe=true style="width:auto; height:500;" :row-class-name="tableRowClassName" @row-click="handleRowClick">
            <el-table-column fixed label="审核时间" width="165" align="center">
                <template #default="scope">
                    <span>{{ new Date(scope.row.audit_time).toLocaleString() }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="auditor_name" label="审核员" width="80" align="center"/>
            <el-table-column label="审核结果" width="80" align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.to_status=='PASSED'" type="success">通过</el-tag>
                    <el-tag v-if="scope.row.to_status=='REJECTED'" type="danger">驳回</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="message" label="留言" width="300" align="center"/>
            <el-table-column fixed="right" label="操作" width="80" align="center">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleRemove($event,scope.row, scope.index)">移除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</template>

<style scoped>
.table{
    display:flex;
    justify-content: center;
}
:deep(.warning-row){
    background-color:var(--el-color-warning-light-7)!important;
}
</style>